/*
*===============DdmgCloudPlatform3 V2.0===============
* DdmgCloudPlatform3 V2.0
* Copyright@大大买钢2018,All Rights Reserved
* Author: yiChangBin(2055960489@qq.com)
* Date: 2019/6/6  14:43
* TODO: 销售-->现货销售页面
*===============DdmgCloudPlatform3 V2.0===============
*/
<template>
    <el-form
            ref="ruleFormTable"
            :model="dataInfo"
            :inline="true"
            class="trade-item-table"
    >
        <el-table
                :data="dataInfo.items"
                header-align="center"
                border
                size="mini"
                max-height="250px"
                style="width: 100%"
                show-summary
                :summary-method="getSummaries"
                highlight-current-row
        >
            <el-table-column align="center" label="序号" type="index" width="50">
                <template slot-scope="scope">
                    <el-form-item>
                        <span>{{scope.$index+1}}</span>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column align="center" label="品名(*)" min-width="130">
                <template slot-scope="scope">
                    <el-form-item
                            :prop="'items.'+scope.$index+'.product_name'"
                            :rules="{required: true, message: '请选择品名', trigger: 'submit'}"
                            style="width: 100%"
                    >
                        <el-ajax-select
                                transCode="E3000002"
                                :data="productTree"
                                :propQuery="{ name: scope.row.product_name }"
                                selfValue="name"
                                filterable
                                size="mini"
                                v-model="scope.row.product_name"
                                @change="productChange(scope.row)"
                                :disabled="dataInfo.isUpdDel>1"
                        />
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column align="center" label="材质" min-width="130">
                <template slot-scope="scope">
                    <el-form-item
                            :prop="'items.'+scope.$index+'.material'"
                            style="width: 100%"
                    >
                        <el-ajax-select
                                transCode="E3000003"
                                :data="scope.row.materialList"
                                :propQuery="{ name:scope.row.material, product_name: scope.row.product_name }"
                                selfValue="name"
                                filterable
                                size="mini"
                                v-model="scope.row.material"
                                :disabled="dataInfo.isUpdDel>1 || !scope.row.product_name"
                        />
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column align="center" label="规格" min-width="180">
                <template slot-scope="scope">
                    <el-form-item
                            :prop="'items.'+scope.$index+'.specifications'"
                            style="width: 100%"
                    >
                        <el-ajax-select
                                transCode="E3000004"
                                :data="scope.row.specList"
                                :propQuery="{ name:scope.row.specifications, product_name: scope.row.product_name }"
                                selfValue="name"
                                filterable
                                size="mini"
                                v-model="scope.row.specifications"
                                :disabled="dataInfo.isUpdDel>1 || !scope.row.product_name"
                                allow-create
                                default-first-option
                        />
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column align="center" label="产地(*)" min-width="130">
                <template slot-scope="scope">
                    <el-form-item
                            :prop="'items.'+scope.$index+'.origin_place'"
                            :rules="{required: true, message: '请选择产地', trigger: 'submit'}"
                            style="width: 100%"
                    >
                        <el-ajax-select
                                transCode="E3000005"
                                :data="scope.row.originList"
                                :propQuery="{ name:scope.row.origin_place, product_name: scope.row.product_name }"
                                selfValue="name"
                                filterable
                                size="mini"
                                v-model="scope.row.origin_place"
                                :disabled="dataInfo.isUpdDel>1 || !scope.row.product_name"
                        />
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column align="center" label="备注">
                <template slot-scope="scope">
                    <el-form-item style="width: 100%">
                        <el-input v-model="scope.row.remark" size='mini'/>
                    </el-form-item>
                </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-form-item style="width: 100%">

                        <el-button style="padding: 0" type="text" size="small" @click="copyTableRow(scope.row)"
                        >插行
                        </el-button>
                        <el-button style="padding: 0" type="text" size="small" @click="clearItemData(scope.row)"
                                   :disabled="scope.row.isUpdDel == 2" v-if="isVisibleClear(scope.row)">清除
                        </el-button>
                        <el-button style="padding: 0" type="text" size="small" @click="removeItemData(scope.row)"
                                   :disabled="scope.row.isUpdDel == 2" v-if="isListAboveOne()">删除
                        </el-button>
                    </el-form-item>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
</template>

<script>
  import "@/utils/tableCut";
  import TableCutMixin from "@/mixin/TableCutMixin";
  import { resetInputMoney } from "@/utils";
  import { createNamespacedHelpers } from "vuex";
  import ElAjaxSelect from "@/components/UI/ElAjaxSelect";
  const { mapState } = createNamespacedHelpers("ddmg/salesContractOperation");

  export default {
    name: "salesContractItemTable",
    mixins: [TableCutMixin],
    props: {
      type: {
        type: Number | String,
        default() {
          return "";
        },
      },
    },
    components: {
      ElAjaxSelect,
    },
    data() {
      return {};
    },
    methods: {
      resetAmount(item, valueType) {
        item[valueType] = resetInputMoney(item[valueType], true);
      },

      //品名发生变化
      productChange(item) {
        item.material = "";
        item.origin_place = "";
        item.specifications = "";
      },

      // 计算合计
      getSummaries({ data }) {
        return [];
      },
      // 重置验证字段
      resetFields() {
        this.$nextTick(() => {
          this.$refs["ruleFormTable"].clearValidate();
        });
      },
      // 验证表格明细
      validateForm() {
        return new Promise((resolve, reject) => {
          this.$refs["ruleFormTable"].validate((valid) => {
            if (valid) resolve();
            else this.$message.error("部分必填字段不符合要求!");
          });
        });
      },
      // 表格数据插行
      copyTableRow(item) {
        //1   新增   2   编辑
        if (this.type == 1) {
          this.tableList.push(JSON.parse(JSON.stringify(item)));
        } else if (this.type == 2) {
          const coneItem = JSON.parse(JSON.stringify(item));
          coneItem.id = "";
          coneItem.order_lot_no = "";
          this.tableList.push(coneItem);
        }
        this.keyUpUpdate();
      },
      // 删除表格项数据
      removeItemData(item) {
        let index = this.tableList.indexOf(item);
        if (index >= 0) this.tableList.splice(index, 1);
        this.keyUpUpdate(true);
      },
      // 清除表格项数据
      clearItemData() {
        this.initDetailTable();
      },
      // 是否显示清除
      isVisibleClear(item) {
        // 编辑状态/只有一条/存在id
        return this.type == 2 && this.tableList.length == 1 && item.id;
      },
      // 是否为最后一条
      isLastItemData(index) {
        return index == this.tableList.length - 1;
      },
      // 是否列表大于一条
      isListAboveOne() {
        return this.tableList.length > 1;
      },
    },
    computed: {
      ...mapState({
/*        productTree: (state) => state.productTree,*/
        dataInfo: (state) => state.editInitInfo,
        tableList: (state) => state.editInitInfo.items,
      }),
    },
  };
</script>
<style rel="stylesheet/scss" lang="scss">
    @import "../../../../assets/style/tradeOrderItemTable";
</style>